<template>
	<view class="pages" >
		<image class="topimg" :src="topImg" mode=""></image>
		<view class="titlebox">
			升级VIP 提升接单效率
		</view>
		<!-- 类型 -->
		<view class="statusbox">
			<view :class="item.bigShow ? 'item-boxyse' : 'item-boxno'" v-for="(item,index) in cardVip" :key="index" :style="{'background-image': 'url('+ item.image +')'}" @click="choiceBnt(index)">
				<view class="top">
					<image class="icon" src="../../../static/vip/vip-icon.png" mode=""></image>
					<view class="name">
						{{item.title}}
					</view>
				</view>
				<view class="botm">
					{{item.tis}}
				</view>
			</view>
		</view>
		<view class="boarbox">
			<view class="title">
				尊享权益
			</view>
			<view class="iconbox">
				<view class="item-icon" v-for="(item,index) in iconList" :key="index">
					<image class="icon" :src="item.url" mode=""></image>
					<view class="text" v-text="item.text" style="white-space:pre-wrap;">
						<!-- {{}} -->
					</view>
				</view>
			</view>
			 <!-- #ifndef APP-PLUS -->
			<view class="buybox" @click="bnt">
				<view class="bntbox">
					<view class="left-box">
						{{moeny}}
					</view>
					<image class="right-box" src="../../../static/vip/buybnt.png" mode=""></image>
				</view>
			</view>
			   <!-- #endif -->
			   <!-- #ifdef APP-PLUS -->
			   <view class="buybox" @click="bntApp">
			   	<view class="bntbox">
			   		<view class="left-box">
			   			{{moeny}}
			   		</view>
			   		<image class="right-box" src="../../../static/vip/buybnt.png" mode=""></image>
			   	</view>
			   </view>
			   <!-- #endif -->
		</view>
<!-- 		<uni-popup ref="popup" type="bottom" :safe-area="false">
			<view class="content-box">
				<view class="top">
					<view class="close" @click="close()">取消</view>
					<view class="title">支付方式</view>
					<view class="right"></view>
				</view>
				<view class="vxbox">
					<image class="iconvx" src="../../../static/vip/vx.png" mode=""></image>
					<view class="title">
						微信支付
					</view>
					<view class="dui">
						对号
					</view>
				</view>
				<view class="bntbox">
					确定支付 ￥999
				</view>
			</view>
		</uni-popup> -->
	</view>
</template>

<script>
import * as user from '@/api/user.js'
import * as index from '@/api/index.js'
	var that
	export default {
		data() {
			return {
				id: '', // 选择的id
				moeny: '', //选择得参数
				Type: uni.getStorageSync('Type'),
				topImg: '', // 头部图片
				cardVip: [
					{
						url: '../../../static/vip/month.png',
						bigShow: true
					},
					{
						url: '../../../static/vip/season.png',
						bigShow: false
					},
					{
						url: '../../../static/vip/year.png',
						bigShow: false
					}
				],
				iconList: [
					{
						url: '../../../static/vip/icon1.png',
						text: '自助置顶\n需求机会'
					},
					{
						url: '../../../static/vip/icon2.png',
						text: '每天查看接单\n增加到30个'
					},
					{
						url: '../../../static/vip/icon3.png',
						text: '发布需求数\n增加到10个'
					},
					{
						url: '../../../static/vip/icon4.png',
						text: '解锁\n谁看过我'
					},
					{
						url: '../../../static/vip/icon5.png',
						text: '每天刷新\n增加到20次'
					},
					{
						url: '../../../static/vip/icon6.png',
						text: '接单群每月\n可推送8次'
					},
					{
						url: '../../../static/vip/icon7.png',
						text: '抖音\n上门拍摄'
					},
					{
						url: '../../../static/vip/icon8.png',
						text: '抖音直播\n优先推荐'
					},
				],
			};
		},
		onLoad () {
			// 获取头部图片
			this.getNameGetConfig()
			// 获取购买信息列表
			this.getCompanyVip()
		},
		methods: {
			// 购买弹窗
			// openBnt() {
			// 	this.$refs.popup.open('bottom')
			// },
			// close() {
			// 	this.$refs.popup.close()
			// },
			// 获取购买信息
			getCompanyVip() {
				user.getCompanyVip().then(res=>{
					this.cardVip[0] = Object.assign(res.data.data[0],this.cardVip[0])
					this.cardVip[1] = Object.assign(res.data.data[1],this.cardVip[1])
					this.cardVip[2] = Object.assign(res.data.data[2],this.cardVip[2])
					this.moeny = this.cardVip[0].tis
					this.id = this.cardVip[0].id
					console.log(this.cardVip)
					this.$forceUpdate()
				})
			},
			// 获取头部图片
			getNameGetConfig() {
				index.nameGetConfig({name: 'company_vip_top'}).then(res=>{
					this.topImg = res.data.company_vip_top
				})
			},
			// 选择开通类型
			choiceBnt(index) {	
				this.cardVip.forEach(item=>{
					item.bigShow = false
				})
				this.cardVip[index].bigShow = true
				this.moeny = this.cardVip[index].tis
				this.id = this.cardVip[index].id
				this.$forceUpdate()
			},
			bnt(){

				user.payCompanyVip({vip_id:this.id,methodtype:'miniapp'}).then(res=>{
					console.log(res,'wx')
						uni.requestPayment({
						    provider: 'wxpay',    //支付类型-固定值
						    timeStamp: res.data.timeStamp, // 时间戳（单位：秒）
						    nonceStr: res.data.nonceStr, // 随机字符串
						    package: res.data.package, // 固定值
						    signType: res.data.signType, //固定值
						    paySign: res.data.paySign, //签名
						    success: res=> {
						      this.$tools.succend('开通成功!')
						      setTimeout(res=>{
						      	uni.navigateBack({
						      		data: 1
						      	})
						      },500)
						    },
						    fail:err=> {
								console.log( res.data.timeStamp, res.data.nonceStr,res.data.package,res.data.signType,res.data.paySign)
						        console.log('fail:' + JSON.stringify(err));
						        console.log("支付失败");
						    }
						});
				})
			},
			bntApp() {
				user.payCompanyVip({vip_id:this.id,methodtype:'app'}).then(res=>{
					console.log(res,'app')
						uni.requestPayment({
						    provider: 'wxpay',    //支付类型-固定值
						    timeStamp: res.data.timeStamp, // 时间戳（单位：秒）
						    nonceStr: res.data.nonceStr, // 随机字符串
						    package: res.data.package, // 固定值
						    signType: res.data.signType, //固定值
						    paySign: res.data.paySign, //签名
						    success: res=> {
						      this.$tools.succend('开通成功!')
						      setTimeout(res=>{
						      	uni.navigateBack({
						      		data: 1
						      	})
						      },500)
						    },
						    fail:err=> {
								console.log( res.data.timeStamp, res.data.nonceStr,res.data.package,res.data.signType,res.data.paySign)
						        console.log('fail:' + JSON.stringify(err));
						        console.log("支付失败");
						    }
						});
				})
			},
			
		}
	}
</script>

<style scoped lang="scss">
	page {
		background-color: #1B1922;
	}
	.pages {
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		background: #110D0C;
	}
	.topimg {
		width: 100%	;
		height: 530rpx;
	}
	.titlebox {
		width: 100%;
		text-align: center;
		font-size: 48rpx;
		font-weight: 600;
		color: #CC9623;
		line-height: 56rpx;
	}
	.statusbox {
		margin-top: 38rpx;
		display: flex;
		align-items: flex-end;
	}
	
	.item-boxyse {
		margin-left: 12rpx;
		margin-right: 12rpx;
		width: 208rpx;
		height: 122rpx;
		background-repeat:no-repeat;
		background-size: 100% 100%;
		.top {
			display: flex;
			align-items: center;
			padding: 12rpx 16rpx 6rpx 10rpx;
			.icon {
				width: 72rpx;
				height: 44rpx;
			}
			.name {
				margin-left: auto;
				font-size: 24rpx;
				color: #8F5849;
			}
		}
		.botm {
			padding-left: 14rpx;
			font-size: 28rpx;
			font-weight: bold;
			color: #98562B;
		}
	}
	.item-boxno {
		margin-left: 12rpx;
		margin-right: 12rpx;
		width: 208rpx;
		height: 104rpx;
		background-repeat:no-repeat;
		background-size: 100% 100%;
		.top {
			display: flex;
			align-items: center;
			padding: 12rpx 16rpx 6rpx 10rpx;
			.icon {
				width: 72rpx;
				height: 44rpx;
			}
			.name {
				margin-left: auto;
				font-size: 24rpx;
				color: #8F5849;
			}
		}
		.botm {
			padding-left: 14rpx;
			font-size: 28rpx;
			font-weight: bold;
			color: #98562B;
		}
	}
	.boarbox {
		width: 100%;
		background: #1B1922;
		border-radius: 32rpx 32rpx 0rpx 0rpx;
		padding-bottom: 90rpx;
		.title {
			padding: 30rpx 40rpx 26rpx 20rpx;
			font-size: 36rpx;
			font-weight: bold;
			color: #FFFFFF;
		}
		.iconbox {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			.item-icon {
				width: 25%;
				display: flex;
				align-items: center;
				flex-direction: column;
				justify-content: center;
				margin-bottom: 20rpx;
				.icon {
					width: 72rpx;
					height: 72rpx;
				}
				.text {
					text-align: center;
					margin-top: 8rpx;
					height: 68rpx;
					font-size: 24rpx;
					color: #FFFFFF;
					line-height: 28rpx;
				}
			}
		}
		.buybox {
			padding: 24rpx;
			.bntbox {
				position: relative;
				height: 112rpx;
				background: #F7D3B3;
				border-radius: 92rpx;
				.left-box {
					width: 50%;
					text-align: center;
					font-size: 40rpx;
					font-weight: bold;
					color: #98562B;
					line-height: 112rpx;
				}
				.right-box {
					width: 60%;
					height: 122rpx;
					position: absolute;
					right: 0;
					bottom: 0;
				}
			}
		}
	}
	// 弹窗
	.content-box {
		padding: 80rpx 40rpx 100rpx 40rpx;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		background-color: #FFFFFF;
		.top {
			display: flex;
			align-items: center;
			.close {
				flex: 1;
				font-size: 24rpx;
				color: #3C71FF;
			}
			.title {
				text-align: center;
				flex: 1;
				font-size: 32rpx;
				font-weight: bold;
				color: #202020;
			}
			.right {
				flex: 1;
			}
		}
		.vxbox {
			margin-top: 80rpx;
			display: flex;
			align-items: center;
			.iconvx {
				width: 48rpx;
				height: 48rpx;
			}
			.title {
				margin-left: 36rpx;
				font-size: 28rpx;
				color: #202020;
			}
			.dui {
				margin-left: auto;
			}
		}
		.bntbox {
			margin-top: 150rpx;
			height: 80rpx;
			background: #FF6600;
			text-align: center;
			line-height: 80rpx;
			color: #FFFFFF;
			font-size: 32rpx
		}
	}
</style>
